<template>

	<view>

		<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in productList"
			:key="item.id" @click="goProDetail(item)">
			<view class="cu-form-group" style="">
				<view style="display: flex; flex: 1; flex-wrap: wrap; margin-top: 0px; margin-left: -8px; height: 38px; width:calc(100vw-62px)">
					<!-- 自定义了一个data-id的属性,可以通过js获取到它的值!  hover-class 指定按下去的样式类-->
					<!-- <view class="cellView" :style="{ color: bindColor(index), backgroundColor: bindBgColor(index) }"
						v-for="(tagItem, index) in bindTag(item)" :key="index">
						{{tagItem}}
					</view> -->
					<view class="cellView" :style="{ color: bindColor(item), backgroundColor: bindBgColor(item) }">
						{{bindTag(item)}}
					</view>
				</view>
				<view class="topTitleV unitV">{{item.submissionTime}}</view>
			</view>
			
			<view class="topTitleV" style="margin-left: 10px;">
				{{item.fromName}}
			</view>
		</view>

	</view>

</template>

<script>
	export default {
		props: {

			productList: {
				type: Array,
				default(){
					return []
				}
			}
			
			

		},
		data() {
			return {

			}
		},
		methods: {
			goProDetail(item) {

				this.$emit('click', item)
			},
			bindTag(item) {
				
				/** 申请单状态  0-待审核  3-审核未通过 1-审核通过 2-审核中 */
				
				if(item.status == 0){
					return "待审核";
				} else if (item.status == 1){
					return '审核通过';
				}else if (item.status == 2){
					return '审核中';
				}else if (item.status == 3){
					return '审核未通过';
				}
			
				// return [item.area, item.proType, item.status]
				// return [item.area, item.proType, item.status]
			},
			bindColor(item) {
				if(item.status == 0){
					return '#888481';
				} else if (item.status == 1){
					return '#3bb100';
				}else if (item.status == 2){
					return '#55aaff';
				}else if (item.status == 3){
					return '#ff0000';
				}
				// let colorArr = ['#4473FF', '#FFA01B', '#41D380'];
				// return colorArr[index % 3];
			},
			bindBgColor(item) {
				// if(item.status == 0){
				// 	return '#F1F4FA';
				// } else if (item.status == 1){
				// 	return '#ff0000';
				// }else if (item.status == 3){
				// 	return '#55ffff';
				// }else if (item.status == 4){
				// 	return '#5555ff';
				// }
				
				// let bgColorArr = ['#F1F4FA', '#FFF5E8', '#ff0000'];
				// return bgColorArr[index % 3];
			},

		}
	}
</script>

<style scoped>
	.uni-list-cell {
		flex-direction: column;
		margin-top: 10px;
		background-color: white;
		padding: 6px 12px;
	
	
	}
	
	.topTitleV {
	
		height: 26px;
		line-height: 26px;
		color: #333333;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 500;
		font-size: 14px;
		
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	
	}
	.unitV{
		color: #555555;
		font-size: 12px;
		margin-top: 0px;
		font-family: PingFangSC-Regular, PingFang SC;
		
	}
	
	.cellView {
		margin-top: 8px;
		margin-left: 8px;
		height: 22px;
		line-height: 22px;
		text-align: center;
		border-radius: 2px;
		padding: 0px 4px !important;
		font-size: 12px;
	
		color: #4272FF;
		background: #F3F4F6;
	}
	
</style>